<template>
  <div>

    <h1>搜索</h1>
    <el-form>
      <el-input class="query" v-model="query" placeholder="请输入账号搜索" clearable @keyup.enter.native="getEntrlist"></el-input>
      <el-button type="success" icon="el-icon-search" circle @click="getEntrlist" ></el-button>
      <el-button type="success" @click="dialogFormVisible=true">企业注册</el-button>
    </el-form>

    <!--注册表单-->
    <el-dialog title="注册" :close-on-click-modal="false" :visible.sync="dialogFormVisible" @close="closeDialog('registerFormRef')">
      <el-form :model="registerInfo" ref="registerFormRef" :rules="registerFormRules" status-icon>
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="registerInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model="registerInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input type="password" v-model="registerInfo.rePassword"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input type="text" v-model="registerInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input type="email" v-model="registerInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input type="tel" v-model="registerInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="从事行业" prop="manage">
          <el-input type="text" v-model="registerInfo.manage"></el-input>
        </el-form-item>
        <el-form-item label="企业地址" prop="address">
          <el-input type="text" v-model="registerInfo.address"></el-input>
        </el-form-item>
        <el-form-item label="公司简介" prop="introduce">
          <el-input type="text" v-model="registerInfo.introduce"></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="reset('registerFormRef')">取 消</el-button>
        <el-button type="primary" @click="register('registerFormRef')">立即注册</el-button>
      </div>
    </el-dialog>
    <h1>企业信息</h1>
    <el-table :data="entrlist" border >
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="username" label="用户名" ></el-table-column>
      <el-table-column prop="password" label="密码" ></el-table-column>
      <el-table-column prop="name" label="企业名称" ></el-table-column>
      <el-table-column prop="email" label="电子邮箱" ></el-table-column>
      <el-table-column prop="phone" label="联系电话" ></el-table-column>
      <el-table-column prop="manage" label="从事行业" ></el-table-column>
      <el-table-column prop="address" label="企业地址" ></el-table-column>
      <el-table-column prop="introduce" label="公司简介" ></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="showEditDialog(scope.row.username)" type="text" size="small">编辑</el-button>
          <el-popconfirm
            confirm-button-text='确定'
            cancel-button-text='算了'
            icon="el-icon-info"
            icon-color="red"
            title="确定要删除这条内容吗？"
            @confirm=deleteInfo(scope.row.id)
          >
            <el-button slot="reference" type="text" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--    编辑-->
    <el-dialog title="编辑"  :close-on-click-modal="false" :visible.sync="editDialog">
      <el-form status-icon :model="editForm" ref="editFormRef"
               label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password type="password" v-model="editForm.password"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input type="text" v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input type="text" v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input type="text" v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="从事行业" prop="manage">
          <el-input type="text" v-model="editForm.manage"></el-input>
        </el-form-item>
        <el-form-item label="企业地址" prop="address">
          <el-input type="text" v-model="editForm.address"></el-input>
        </el-form-item>
        <el-form-item label="公司简介" prop="introduce">
          <el-input type="text" v-model="editForm.introduce"></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="editDialog=false">取 消</el-button>
        <el-button type="primary" @click="editInfo('editFormRef')">提交修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import Qs from "qs";

    export default {
        name: "entrInfo",
      data() {
        // 验证两次密码正误
        const validatePsdCheck = (rule, value, callback) => {
          if (value.length < 1) {
            return callback(new Error('重复密码不能为空！'));
          } else if (value !== this.registerInfo.password) {
            return callback(new Error('两次输入密码不一致！'));
          } else {
            callback()
          }
        }

        return {
          //获取用户列表的数据
          entrlist:[],
          //搜索框
          query: '',
          //注册对话框开关
          dialogFormVisible: false,
          //企业注册信息对象
          registerInfo: {},
          //企业编辑信息对象
          editForm:{},
          //企业编辑对话框开关
          editDialog:false,
          //注册输入框规则
          registerFormRules: {
            username: [
              //validator:this.validators.validateCode
              {required: true, message: '请输入账号', trigger: 'blur'},
              {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'},
            ],
            password: [
              //validator: this.validators.validatePsdReg
              {required: true, message: '请输入密码', trigger: 'blur'},
              {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'},
            ],
            rePassword: [
              {required: true, validator: validatePsdCheck, trigger: 'blur'},
            ],
            // phone: [
            //   {required: true,validator: this.validators.validatePhone, trigger: 'blur'},
            // ],
            // email: [
            //   {required: true,validator: this.validators.validateEMail, trigger: 'blur'},
            // ],
          }

        }
      },

      created() {
        this.getEntrlist()
      },

      methods: {
        async getEntrlist() {
          let _this = this;
          await this.$axios.post('api/enterprise/allInfo',Qs.stringify({
            username:_this.query
          }))
            .then((res)=>{
              console.log(res);
              if(res.status!==200){
                return _this.$message.error("企业数据获取失败")
              }
              _this.entrlist = res.data.data
              console.log(res)
            })
        },
        //注册
        register(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let _this = this;
              this.$axios.post("/api/enterprise/register", Qs.stringify(_this.registerInfo))
                .then(res=>{
                  console.log(res);
                  if (res.data.code === 200) {
                    alert(res.data.message);
                    console.log(res.data.message);
                    _this.dialogFormVisible = false;
                  }else{
                    alert(res.data.message);
                    console.log(res.data.message);
                  }
                }).catch(err=>{
                this.$message(err);
              })
            } else {
              alert("用户信息为空,请输入!")
            }
          })
        },
        //重置表单
        reset(formNameRef) {
          this.$refs[formNameRef].resetFields();
          this.dialogFormVisible = false;
        },
        //右上角X 关闭注册对话框 重置表单
        closeDialog(formNameRef){
          this.$refs[formNameRef].resetFields();
        },
        //展示编辑之前的信息
       async showEditDialog(userName){
          console.log(userName);
          const {data:res} = await this.$axios.post("/api/enterprise/getOneInfo", Qs.stringify({username: userName}))
          console.log(res)
          if(res.code!==200){
            this.$message.error("查询用户信息失败")
          }
          this.editForm=res.data
          this.editDialog=true
        },

        //确认修改方法
        editInfo(formName){
          this.$refs[formName].validate(async valid => {
            if (!valid) return this.$message.error("参数错误");
            let _this = this;
            const {data: res} = await _this.$axios.put("/api/enterprise/editOneInfo", Qs.stringify({
              id: _this.editForm.id,
              username: _this.editForm.username,
              password: _this.editForm.password,
              name: _this.editForm.name,
              email: _this.editForm.email,
              phone: _this.editForm.phone,
              manage: _this.editForm.manage,
              address: _this.editForm.address,
              introduce: _this.editForm.introduce,
            }))
            console.log(res)
            if (res.code !== 200) {
              return _this.$message.error("数据更新失败!");
            }
            _this.editDialog = false;
            _this.getEntrlist();
            _this.$message.success("数据更新成功!")
          })
        },
        //删除一条信息
        async deleteInfo(id) {
          let _this = this;
          console.log(id);
          const {data:res} = await _this.$axios.post("/api/enterprise/deleteInfo",Qs.stringify({id:id}))
          console.log(res)
          if(res.code!==200){
            return _this.$message.error(res.message);
          }
          this.getEntrlist();
          return _this.$message.success(res.message);
        }
      }
    }
</script>

<style scoped>
  .query {
    width: 200px
  }

  .register-button {
    text-align: center;
  }
</style>
